@import '../../../core/index.less';
.orin-sw-reloading-root.mask {
  background-color: rgba(0, 0, 0, 0.75);
}

.orin-sw-reloading-root {
  z-index: 13 !important;
  width: 100%;
  height: 100%;
  position: absolute;
  // background-color: rgba(0, 0, 0, 0.5);

  // 兼容方案
  // &:before {
  //   content: '';
  //   position: absolute;
  //   top: 0; right: 0; bottom: 0; left: 0;
  //   z-index: 12;
  //   // 让遮罩层足够的暗，无论什么背景都可以看清楚上面的文字 
  //   background-color: rgba(0,0,0, 0.5);
  //   /* 使图层在支持 filter 时不显示，不支持 filter 时显示，达到兼容效果 */
  //   filter: opacity(0%);
  // }

  // &:after {
  //   content: '';
  //   position: absolute;
  //   top: 0; right: 0; bottom: 0; left: 0;
  //   z-index: 11;
  //   background-color: rgba(0,0,0,.8);
  //   // filter: blur(10px);
  // }
  
  #anim {
    z-index: 13;
    width: 80 / @remScale;
    height: 80 / @remScale;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40 / @remScale;
    margin-left: -40 / @remScale;
    border-radius: 40%;
    // overflow: hidden;
  }

  .spinner {
      position: relative;
      height: 100%;
      width: 100%;
      // margin: 60 / @remScale auto;

      border: none;

      &:before,
      &:after {
          position: absolute;
          content: '';
          box-sizing: border-box;
          border: 2 / @remScale solid @mainColor;
          // background-color: @white;
          animation: spin 2.5s linear infinite;
      }

      &::before {
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
      }

      &::after {
          width: 70%;
          height: 70%;
          top: 15%;
          left: 15%;        
          animation-direction: reverse;
      }
  }


  @keyframes spin {
      from {
          transform: rotate(0);
      }

      to {
          transform: rotate(360deg);
      }
  }


  .text {
    font-size: 18 / @remScale;
    position: relative;
    top: 18 / @remScale;
    width: 80 / @remScale;
    text-align: center;
    color: @white;
  }
}

